<template>
	<view :data-theme="theme">
		<view class='productSort' :style="{ height: winHeight + 'px' }">
			<view class="container">
				<view class="group-list">
					<view class="group-item" v-for="(item, index) in groupBuyList" :key="index">
						<view class="group-header">
							<view class="group-info">
								<text class="lottery-name">{{ item.lotteryName }}</text>
								<text class="period">第 {{ item.period }} 期 [{{ item.status }}]</text>
							</view>
							<view class="user-info">
								<image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
								<view class="user-details">
									<view class="user-level">Lv.{{ item.userLevel }}</view>
									<text class="username">{{ item.username }}</text>
								</view>
							</view>
						</view>

						<view class="progress-section">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: item.progress + '%' }"></view>
							</view>

							<view class="group-stats">
								<view class="stat-item">
									<text class="stat-label">总金额</text>
									<text class="stat-value amount">¥ {{ item.totalAmount }}</text>
								</view>
								<view class="stat-item">
									<text class="stat-label">每份</text>
									<text class="stat-value">¥ {{ item.perShare }}</text>
								</view>
								<view class="stat-item">
									<text class="stat-label">剩余 (份)</text>
									<text class="stat-value">{{ item.remainingShares }} 份</text>
								</view>
								<view class="stat-item">
									<text class="stat-label">进度</text>
									<text class="stat-value">{{ item.progress }}%</text>
								</view>
							</view>
						</view>

						<button class="join-btn">认购</button>
					</view>
				</view>
			</view>
			<view class="footerBottom"></view>
		</view>
		<view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
		<pageFooter></pageFooter>
	</view>
</template>
<script>
let app = getApp();
import { getCategoryList } from '@/api/product.js';
import easyLoadimage from '@/components/base/easy-loadimage.vue';
import { mapGetters } from "vuex";
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
import pageFooter from "@/components/pageFooter/index.vue";
import animationType from '@/utils/animationType.js'
export default {
	components: {
		easyLoadimage,
		tuiSkeleton,
		pageFooter
	},
	computed: mapGetters(['bottomNavigationIsCustom']),
	data() {
		let active = 0;
		// #ifdef H5
		active = location.hash.substr(1);
		// #endif
		return {
			theme: app.globalData.theme,
			showSkeleton: true, //骨架屏显示隐藏
			groupBuyList: [
				{
					lotteryName: '河内三分彩',
					period: '20250630355',
					status: '进行中',
					userAvatar: '/static/avatar.png',
					userLevel: 26,
					username: '赵小**',
					totalAmount: 15048,
					perShare: 1,
					remainingShares: 8755,
					progress: 42
				},
				{
					lotteryName: '河内三分彩',
					period: '20250630355',
					status: '进行中',
					userAvatar: '/static/avatar.png',
					userLevel: 27,
					username: 'kw**',
					totalAmount: 12348,
					perShare: 1,
					remainingShares: 6807,
					progress: 45
				},
				{
					lotteryName: '河内三分彩',
					period: '20250630355',
					status: '进行中',
					userAvatar: '/static/avatar.png',
					userLevel: 27,
					username: '张**',
					totalAmount: 3600,
					perShare: 1,
					remainingShares: 2374,
					progress: 34
				},
				{
					lotteryName: '香港五分彩',
					period: '20250630213',
					status: '进行中',
					userAvatar: '/static/avatar.png',
					userLevel: 27,
					username: 'qq**',
					totalAmount: 13720,
					perShare: 1,
					remainingShares: 3436,
					progress: 75
				},
				{
					lotteryName: '河内五分彩',
					period: '20250630213',
					status: '进行中',
					userAvatar: '/static/avatar.png',
					userLevel: 27,
					username: '发发**',
					totalAmount: 17150,
					perShare: 1,
					remainingShares: 4649,
					progress: 73
				}
			]
		}
	},
	onLoad(options) {
		let that = this
		uni.getSystemInfo({
			success: function (res) {
				that.winHeight = res.windowHeight
			},
		});
		// #ifdef H5
		document.body.addEventListener('touchmove', function (event) {
			if (that.$route.path == '/pages/goods_cate/goods_cate') {
				event.preventDefault();
			}
		}, {
			passive: false
		});
	},
	onShow() {
		let that = this
		// let routes = getCurrentPages();
	},
	methods: {
		infoScroll: function () {
			let that = this;
			//设置商品列表高度
			uni.getSystemInfo({
				success: function (res) {
					that.bottomheight = (res.windowHeight) * (750 / res.windowWidth) - 98;
				},
			});
			let hightArr = [];
			for (let i = 0; i < that.productList.length; i++) {
				let item = that.productList[i]
				if (!that.productList[i].childList) {
					continue;
				}
				for (let j = 0; j < that.productList[i].childList.length; j++) {
					//获取元素所在位置
					let query = uni.createSelectorQuery().in(this);
					let idView = "#b" + item.id + j;
					query.select(idView).boundingClientRect();
					query.exec(function (res) {
						if (res[0]) {
							let top = res[0].top;
							hightArr.push({ top, i });
						}
					});
				};
			};
			that.hightArr = hightArr;
		},

	}
}
</script>
<style scoped lang="scss">
.container {
	background-color: #2c2c2c;
	min-height: 100vh;
	padding: 20rpx;
}

.group-item {
	background-color: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
}

.group-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 30rpx;
}

.lottery-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.period {
	font-size: 24rpx;
	color: #4CAF50;
}

.user-info {
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}

.user-level {
	background-color: #ff6600;
	color: white;
	padding: 4rpx 10rpx;
	border-radius: 15rpx;
	font-size: 20rpx;
	margin-bottom: 5rpx;
}

.username {
	font-size: 24rpx;
	color: #666;
}

.progress-section {
	margin-bottom: 30rpx;
}

.progress-bar {
	height: 12rpx;
	background-color: #f0f0f0;
	border-radius: 6rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #ff6600 0%, #ff9900 100%);
	transition: width 0.3s ease;
}

.group-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.stat-item {
	text-align: center;
}

.stat-label {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-bottom: 8rpx;
}

.stat-value {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.amount {
	color: #ff6600;
}

.join-btn {
	width: 100%;
	background-color: #ff6600;
	color: white;
	border: none;
	border-radius: 25rpx;
	padding: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>
